<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #d3d3d3;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Utility function to draw a curved arrow
    function drawCurvedArrow(x, y, radius, startAngle, endAngle, clockwise, arrowSize) {
        // Draw the arc
        ctx.beginPath();
        const isCCW = !clockwise;
        ctx.arc(x, y, radius, startAngle, endAngle, isCCW);
        ctx.stroke();

        // Draw the arrowhead
        const tipX = x + radius * Math.cos(endAngle);
        const tipY = y + radius * Math.sin(endAngle);
        
        let tangentAngle;
        if (clockwise) {
            tangentAngle = endAngle + Math.PI / 2;
        } else {
            tangentAngle = endAngle - Math.PI / 2;
        }

        ctx.beginPath();
        ctx.moveTo(tipX, tipY);
        ctx.lineTo(tipX - arrowSize * Math.cos(tangentAngle - Math.PI / 6), tipY - arrowSize * Math.sin(tangentAngle - Math.PI / 6));
        ctx.moveTo(tipX, tipY);
        ctx.lineTo(tipX - arrowSize * Math.cos(tangentAngle + Math.PI / 6), tipY - arrowSize * Math.sin(tangentAngle + Math.PI / 6));
        ctx.stroke();
    }
    
    // --- Main Drawing ---
    
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;

    // Triangle vertices
    const A = { x: 250, y: 60 };
    const B = { x: 80, y: 320 };
    const C = { x: 420, y: 320 };

    // Draw the triangle
    ctx.beginPath();
    ctx.moveTo(A.x, A.y);
    ctx.lineTo(B.x, B.y);
    ctx.lineTo(C.x, C.y);
    ctx.closePath();
    ctx.stroke();

    // Draw vertex labels
    ctx.font = '24px serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('A', A.x, A.y - 20);
    ctx.fillText('B', B.x - 20, B.y + 5);
    ctx.fillText('C', C.x + 20, C.y + 5);

    // Draw label 'a'
    const midAC = { x: (A.x + C.x) / 2, y: (A.y + C.y) / 2 };
    ctx.font = 'italic 22px serif';
    ctx.fillText('a', midAC.x + 30, midAC.y - 15);

    // Draw central magnetic field label 'B'
    const centerX = 250;
    const centerY = 220;
    ctx.font = 'bold 30px serif';
    ctx.fillText('B', centerX, centerY - 20);

    // Draw dots representing the magnetic field
    function drawDot(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 2.5, 0, 2 * Math.PI);
        ctx.fill();
    }
    // Top row of dots
    drawDot(centerX - 35, centerY);
    drawDot(centerX, centerY);
    drawDot(centerX + 35, centerY);
    // Middle row of dots
    drawDot(centerX - 50, centerY + 40);
    drawDot(centerX - 17, centerY + 40);
    drawDot(centerX + 17, centerY + 40);
    drawDot(centerX + 50, centerY + 40);
    // Bottom row of dots
    drawDot(centerX - 35, centerY + 80);
    drawDot(centerX, centerY + 80);
    drawDot(centerX + 35, centerY + 80);

    // Draw curved arrows near vertices based on visual inspection
    // Arrow at A (clockwise)
    drawCurvedArrow(A.x + 22, A.y + 10, 25, 1.35 * Math.PI, 0.45 * Math.PI, true, 8);
    // Arrow at B (counter-clockwise)
    drawCurvedArrow(B.x - 20, B.y - 15, 25, 0.6 * Math.PI, 1.4 * Math.PI, false, 8);
    // Arrow at C (clockwise)
    drawCurvedArrow(C.x, C.y + 25, 25, 0.6 * Math.PI, 1.6 * Math.PI, true, 8);

    // Draw the caption
    ctx.font = '24px "SimSun", "Songti SC", serif'; // Use a font that supports Chinese characters
    ctx.fillText('电图 3.1.1', 250, 410);

</script>
</body>
</html>